{% extends "authentication/base.html" %}

{% block title %}登录{% endblock %}

{% block content %}
  <div class="card mt-3 mb-3" style="background-color: {% if low %}{{ low_color }}{% else %}#ffa0b1{% endif %};">
    <h5 class="card-header">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-up" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.354-5.854a.5.5 0 0 0-.708 0l-1.5 1.5a.5.5 0 0 0 .708.708l.646-.647V14.5a.5.5 0 0 0 1 0v-2.793l.646.647a.5.5 0 0 0 .708-.708l-1.5-1.5ZM11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
        <path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"></path>
      </svg>
      登录
    </h5>
    <div class="card-body">
      <form action="{% url 'authentication:login' %}" method="post">
        {% csrf_token %}
        <div class="form-floating mb-3">
          <input type="text" class="form-control {% if low %}text-bg-secondary{% else %}text-bg-danger{% endif %}" id="username"
                 name="username" placeholder="username" value="{{ form.username.value|default:"" }}"
                 autofocus required>
          <label for="username">用户名</label>
        </div>
        <div class="form-floating mb-3">
          <input type="password" class="form-control {% if low %}text-bg-secondary{% else %}text-bg-danger{% endif %}" id="password"
                 name="password" placeholder="password" value="{{ form.password.value|default:"" }}"
                 required>
          <label for="password">密码</label>
        </div>
        {% if form.errors %}
          <div class="alert alert-danger" role="alert">
          账号或密码不正确。
          </div>
        {% elif next %}
          {% if user.is_authenticated %}
            <div class="alert alert-danger" role="alert">
            您的账号没有此权限，请登录一个拥有此权限的账号。
            </div>
          {% else %}
            <div class="alert alert-danger" role="alert">
            请登录再查看此页面。
            </div>
          {% endif %}
        {% endif %}
        <small><a href="{% url 'authentication:register' %}" class="{% if low %}link-dark{% else %}link-light{% endif %}">没有账号？前往注册-></a></small>
        <div class="d-grid">
          <button type="submit" class="btn {% if low %}btn-secondary{% else %}btn-danger{% endif %}">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-up" viewBox="0 0 16 16">
              <path fill-rule="evenodd" d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.354-5.854a.5.5 0 0 0-.708 0l-1.5 1.5a.5.5 0 0 0 .708.708l.646-.647V14.5a.5.5 0 0 0 1 0v-2.793l.646.647a.5.5 0 0 0 .708-.708l-1.5-1.5ZM11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
              <path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"></path>
            </svg>
            登录
          </button>
        </div>
        <input type="hidden" name="next" value="{{ next }}">
      </form>
    </div>
  </div>
{% endblock %}